<template>
	<div class="operation">
		<el-collapse v-model="activeNames">
			<el-collapse-item :title="items.title" :name="index + 1" v-for="(items, index) in datas" :key="index">
				<div class="compon">
					<div
						class="componList cursor-pointer"
						v-for="(item, ind) in items.comList"
						:key="ind"
						@click="operationTemplate(item.name)"
						:class="{ active: operationType == item.name }"
					>
						<SvgIcon :name="item.icon" :size="30"></SvgIcon>
						<p>{{ item.text }}</p>
					</div>
				</div>
			</el-collapse-item>
		</el-collapse>

		<el-collapse v-model="activeNames">
			<el-collapse-item :title="items.title" :name="index + 1" v-for="(items, index) in datas2" :key="index">
				<div class="compon">
					<div
						class="componList cursor-pointer"
						:data-name="item.name"
						v-for="(item, ind) in items.comList"
						:key="ind"
						@click="operationPage(item.name)"
						:class="{ active: pageOperationType == item.name }"
					>
						<SvgIcon :name="item.icon" :size="30"></SvgIcon>
						<p>{{ item.text }}</p>
					</div>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';

let emits = defineEmits(['choiceBase', 'setup']);

const activeNames = reactive([1, 2]);

let operationType = ref('');
let pageOperationType = ref('');
let datas = reactive([
	{
		title: '应用设置',
		comList: [
			{
				name: 'tabBar',
				text: '底部导航',
				icon: 'my-icon icon-dibudaohang',
			},
			{
				name: 'floatbut',
				text: '悬浮按钮',
				icon: 'my-icon icon-xuanfuanniu1',
			},
			{
				name: 'popupad',
				text: '弹出广告',
				icon: 'my-icon icon-danchuangguanggao1',
			},
		],
	},
]);

let datas2 = reactive([
	{
		title: '页面设置',
		comList: [
			{
				name: 'setup',
				text: '应用设置',
				icon: 'iconfont icon-ico',
			},
      // {
      // 	name: 'navigation',
      // 	text: '应用导航',
      // 	icon: 'my-icon icon-daohang1',
      // },
		],
	},
]);

let operationTemplate = (name: string) => {
	console.log('name: ', name);

	operationType.value = name;

	emits('choiceBase', name);
};

let operationPage = (name: string) => {
	emits('setup', name);
	pageOperationType.value = name;
};

const operationTypeName = (name: string) => {
	console.log('setOperationTypeName name: ', name);
	operationType.value = name;
};

defineExpose({ operationTypeName });
</script>

<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
	background-color: var(--next-color-primary-lighter);
	padding-left: 10px;
}
.operation {
	width: 275px;
	height: 100%;
	background: #fff;

	.compon {
		border-top: 1px solid var(--next-border-color-light);
		padding-top: 5px;

		.active {
			background-color: var(--next-color-seting-main);
		}
	}
	.componList {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 33.33%;
		height: 100%;
		&:hover {
			background-color: var(--next-color-seting-main);
		}
		img {
			height: 50px;
		}

		&:nth-child(2n) {
		}
	}
}
</style>
